$(function () {

    // 1.一级菜单的渲染
    $.ajax({
        // 请求类型
        type: "get",
        // 请求地址
        url: "/category/queryTopCategory",
        // 返回的数据  'text', 'xml', 'json', 'script'
        dataType: "json",
        success: function (res) {
            // console.log(res)

            // ajax中使用 ==》 使用模板引擎
            let str = template('tmp', res)
            $('.mui-scroll ul').html(str)
        }
    })


    // 2.二级菜单的渲染封装
    function arrly(id) {
        $.ajax({
            // 请求类型
            type: "get",
            // 请求地址
            url: "/category/querySecondCategory",
            // 请求数据
            data: {
                id: id
            },
            // 返回的数据  'text', 'xml', 'json', 'script'
            dataType: "json",
            success: function (res) {
                // console.log(res)

                // ajax中使用 ==》 使用模板引擎
                let str = template('tmp1', res)
                $('.cate-content').html(str)
            }
        })
    }
    arrly(1)


    // 3.点击一级菜单进行排它
    $('.mui-scroll ul').on('click','a',function () {
        // 排它 ==》 赋类清类
        $(this).parent().addClass('current').siblings().removeClass('current')
        // 重新渲染二级菜单
        arrly($(this).data('id'))
    })

})